tengo un boton Ahora, cuando haga clic en ese botón, debería enfocarse en un campo de entrada (un campo de comentario para ser precisos). Sin embargo, en esa función JavaScript, especifiqué "e" como parámetro, y esto en la llamada a la función onclick. Entonces, al usar estos, quiero poder enfocarme en el campo de entrada al hacer clic en el botón. Aquí está el código:
<input type="text" name="textComment" class="textComment" placeholder="Write a comment"> <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p> <div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px"> <h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4> <h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4> <h4 class="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4> </div> <div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'"> <h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed" class="textLike" onclick="textLikeClick(this)"><i class="fa fa-thumbs-up"></i> Like</h2> <h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2> </div>La función JavaScript:
function textCommentClick(e) { document.querySelector('.textComment').focus(); }Entonces, en la función, quiero poder concentrarme en el campo de entrada ".textComment". Por favor, ayuda.
Encuentre el antepasado más cercano de ambos elementos. Digamos que es <div class="grandparent"> . Luego puede navegar hasta él con .closest , luego llegar al hijo <input> con querySelector .
function textCommentClick(e) { e.closest('.grandparent').querySelector('.textComment').focus(); } <div class="grandparent"> <input type="text" name="textComment" class="textComment" placeholder="Write a comment"> <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"> <?php echo $row["body"]; ?> </p> <div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px"> <h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4> <h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4> <h4 class="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4> </div> <div> <h2 class="textLike"><i class="fa fa-thumbs-up"></i> Like</h2> <h2 class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2> </div> </div>Pero sería mucho mejor adjuntar el oyente correctamente usando JavaScript en lugar de un atributo HTML en línea.
for (const h2 of document.querySelectorAll('.makeComment')) { h2.addEventListener('click', () => { h2.closest('.grandparent').querySelector('.textComment').focus(); }); } <div class="grandparent"> <input type="text" name="textComment" class="textComment" placeholder="Write a comment"> <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"> <?php echo $row["body"]; ?> </p> <div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px"> <h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4> <h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4> <h4 class="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4> </div> <div> <h2 class="textLike"><i class="fa fa-thumbs-up"></i> Like</h2> <h2 class="makeComment"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2> </div> </div>Para esto, debe seleccionar el elemento con getElementsByClassName , luego debe agregar un clic en EventListener en el botón y llamar a la función como una función de devolución de llamada que creó.
const button = document.getElementsByClassName('makeComment'); if (button.length) { button[0].addEventListener("click", textCommentClick, false); } function textCommentClick(e) { document.querySelector('.textComment').focus(); } <input type="text" name="textComment" class="textComment" placeholder="Write a comment"> <h2 id="_button" style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>